<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">

    </div>

</body>
<script>
    let obj = {
            name: 'div', //指定渲染标签
            props: {
                class: 'box1',
                id: "boxId",
                key: "2",
                children: ["我是一个div盒子"]
            }
        }
        // 封装一个用来创建虚拟标签的函数
        //有2个参数 1 要重建的标签对象 2.要渲染的位置
    function renderDom(obj, root) {
        let dom = document.createElement(obj.name) //重建一个标签
            // 中间给标签添加props里面的属性
            // 用 objkey.key获取对象的所有属性，获取到的是数组，通过长度判断
        if (Object.keys(obj.props)) {
            //再去遍历props内容
            for (let key in obj.props) {
                if (key === "children") {
                    obj.props[key].forEach((item) => {
                        dom.innerHTML += item
                    })

                } else {
                    dom.setAttribute(key, obj.props[key])
                }
            }
        }
        root.appendChild(dom)
    }
    renderDom(obj, root)
</script>

</html>